<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.all{
				width: 400px;
				height: 300px;
				border: 3px solid #333;
				margin: 30px;
			}
			.out{
				margin: 30px;
				width: 300px;
				height: 200px;
				border: 3px solid green;
				
			}
			.item{
				width: 100px;
				height: 40px;
				margin: 10px;
				float: left;
				background-color: royalblue;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="item">李雷</div>
			<div class="item">小明</div>
			<div class="item">03</div>
			<div class="item">04</div>
			<div class="item">05</div>
			<div class="item">06</div>
			<div class="item">07</div>
			<div class="item">08</div>
			<div class="item">09</div>
			<div class="item">大卫</div>
		</div>
		<div class="out">
			
		</div>
	</body>
	<script type="text/javascript">
		var item = document.querySelectorAll(".all .item");
		var out = document.querySelector(".out");
		var outs = [];
		
		for (var i=0;i<item.length;i++) {
			item[i].onclick = function(){
				this.style.backgroundColor = "red";
				
				if(outs.indexOf(this.innerText) == -1){
					outs.push(this.innerText);
					shows()
				}else{
					alert("这个人已经被点过了");
				}
			}
		}
		
		function shows(){
			var str = "";
			for (var i=0;i<outs.length;i++) {
				str += "<div class='item'>"+outs[i]+"</div>";
			}
			out.innerHTML = str;
		}
		
	</script>
</html>
